<template>
  <div class="index">

    <el-row :gutter="20" style="margin-top:10px;">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix" >
              <span>创建索引</span>
            </div>
            <div class="body">
              <span class="desc"> 创建索引指 ElasticSearch根据文章创建出适合搜索的索引类型 </span>
              <el-button class="el-icon-ali-chuangjian" type="primary" @click="createIndex()"> 创建索引 </el-button>
            </div>

          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix" >
              <span>导入更新数据</span>
            </div>
            <div class="body">
              <span class="desc"> 导入更新数据指创建文章索引后,从数据库中查询数据并导入ElasticSearch中 </span>
              <el-button class="el-icon-ali-daoru" type="success" @click="importData()"> 导入更新数据 </el-button>
            </div>

          </el-card>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix" >
              <span>删除索引</span>
            </div>
            <div class="body">
              <span class="desc"> 删除索引指 ElasticSearch删除文章的索引类型。并且删除ElasticSearch文章数据 </span>
              <el-button class="el-icon-ali-shanchu" type="danger" @click="deleteIndex()"> 删除索引 </el-button>
            </div>

          </el-card>
        </div>
      </el-col>

    </el-row>


    <el-dialog title="执行命令" :visible.sync="dialogVisible" center :append-to-body='true' width="20%">
      <h3><i class="el-icon el-icon-loading"></i> 正在执行命令 请稍等 </h3>
    </el-dialog>


  </div>

</template>

<script>
  import { importData, createIndex, deleteIndex} from '@/api/elasticsearch'

  export default {
    name: 'index',
    data() {
      return {
        dialogVisible: false
      }
    },
    computed: {

    },
    mounted: function() {
    },
    methods: {

      /**
       * 创建索引
       */
      createIndex(){

        this.dialogVisible = true;
        // api获取
        createIndex().then(response => {
          if (response.code == 200) {

            this.$message({
              showClose: true,
              message: response.message,
              type: 'success',
              center: true
            });

            this.dialogVisible = false;
          }

        }).catch(error => {
          console.log(error);
          this.dialogVisible = false;
        })

      },

      /**
       * 删除索引
       */
      deleteIndex(){

        this.dialogVisible = true;
        // api获取
        deleteIndex().then(response => {
          if (response.code == 200) {

            this.$message({
              showClose: true,
              message: response.message,
              type: 'success',
              center: true
            });

            this.dialogVisible = false;
          }

        }).catch(error => {
          console.log(error);
          this.dialogVisible = false;
        })
      },

      /**
       * 导入数据
       */
      importData(){

        this.dialogVisible = true;
        // api获取
        importData().then(response => {
          if (response.code == 200) {

            this.$message({
              showClose: true,
              message: response.message,
              type: 'success',
              center: true
            });
            this.dialogVisible = false;
          }

        }).catch(error => {
          console.log(error);
          this.dialogVisible = false;
        })
      },

    }



  }
</script>

<style lang="scss" scoped>
  //卡片样式
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .desc{
     display: block;
    margin: 10px ;
    line-height: 30px;
    letter-spacing:2px
  }

  .clearfix {
    text-align: center;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    margin: 20px 0;
    width: 100%;
  }

  //文本样式区
  .name-role {
    font-size: 16px;
    padding: 5px;
    text-align: center;
  }

  .sender {
    text-align: center;
  }

  .registe-info {
    text-align: center;
    padding-top: 10px;
  }

  .personal-relation {
    font-size: 16px;
    padding: 0px 5px 15px;
    margin-right: 1px;
    width: 100%
  }

  .relation-item {
    padding: 12px;

  }

  .dialog-footer {
    padding-top: 10px;
    padding-left: 10%;
  }

  //布局样式区
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
